<template>
	<!-- 客服 -->
	<view class="service-popup" v-if="popupShow">
		<view class="shadow" v-show="serviceShow"></view>
		<!-- <view class="service-icon" :class="['type'+type, minWidth ? 'minWidth' : '']" :style="{ top: top + 'rpx' }" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @click="serviceClick"> -->
		<view class="service-icon" :class="['type'+type, minWidth ? 'minWidth' : '']" :style="{ top: top + 'rpx' }" @tap="serviceClick">
			<view class="block">
				<template v-if="type=='1'">
					<view class="iconfont1 iconfont icon-qiehuan"></view>
					<view class="text">AI分析</view>
					<view @click.stop="popupShow=false" class="iconfont2 iconfont icon-guanbi2"></view>
				</template>
				<template v-if="type=='2'">
					<image class="img" src="https://1322345190.vod-qcloud.com/fd615140vodcq1322345190/fd9e20e85145403698860611367/elGaP3PDaVEA.svg" mode="aspectFit"></image>
				</template>
				<template v-if="type=='3'">
					<view class="name">{{pscrollTop}}题目纠错</view>
					<image class="img" src="https://1322345190.vod-qcloud.com/fd615140vodcq1322345190/fd9e20e85145403698860611367/elGaP3PDaVEA.svg" mode="aspectFit"></image>
				</template>
				<template v-if="type=='4'">
					<view class="name">
						<view class="iconfont icon-yousanjiao"></view>
						<view class="iconfont2">×</view>
					</view>
					<image class="img" src="../static/image/statistics.png" mode="aspectFit"></image>
				</template>
				<template v-if="type=='5'">
					<view></view>
				</template>
			</view>
		</view>
		<view v-show="serviceShow" class="service-model">
			<view class="close" @click="serviceShow=false"><span class="iconfont icon-guanbi2"></span></view>
			<view class="text1">扫码添加客服微信</view>
			<image class="image" show-menu-by-longpress src="../static/image/core.png" mode="aspectFill"></image>
			<view class="text2">长按识别二维码</view>
		</view>
	</view>
</template>

<script>
	import pageScrollMixin  from "@/mixins/pageScrollMixin.js"
	export default {
		name:"servicePopup",
		mixins: [pageScrollMixin],
		props: {
			fixedTop: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: '1'
			},
			pscrollTop: {
				type: Number,
				default: 0
			}
			
		},
		watch: {
			pscrollTop(newVal){
				this.minWidth=true
			}
		},
		data() {
			return {
				serviceShow: false,//是否显示客服二维码
				startY: 0,
			    top: 800,
				popupShow: true,
				minWidth: false,
			};
		},
		created(){
			if(this.type=='4'){
				this.popupShow=false;
			}
		},
		mounted(){
			if (this.fixedTop) {
			    this.top = Number(this.fixedTop)
		    }
		},
		methods: {
			imChange(e){
				console.log("跳转IM客服成功", e);
			},
			serviceClick(){
				console.log('serviceClick')
				if(this.type=='2'){
					if(this.minWidth){
						this.minWidth=false
						return
					}
					this.serviceShow=true;
					return
				}
				this.$emit('serviceClick')
			},
			serviceModelShow(){
				this.serviceShow=true;
			},
			handleTouchStart(e) {
			  this.startY = e.touches[0].clientY;
			  e.preventDefault(); // 阻止默认行为，防止页面滚动
			},
			handleTouchMove(e) {
			  e.preventDefault(); // 阻止默认行为，防止页面滚动
			  const moveY = e.touches[0].clientY - this.startY;
			  // #ifdef MP-WEIXIN
			  this.top += moveY * (750 / wx.getSystemInfoSync().windowWidth); // 换算为rpx
			  // #endif
			  this.startY = e.touches[0].clientY;
			},
			handleTouchEnd(e) {
			  e.preventDefault(); // 阻止默认行为，防止页面滚动
			},
		},
		beforeDestroy(){
			
		}
	}
</script>

<style lang="scss" scoped>
	.service-popup{
		.shadow{
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1111;
			background-color: rgba(0,0,0,.5);
		}
	}
	.service-icon{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 18rpx;
		top: 60%;
		z-index: 12;
		width: 214rpx;
		border-radius: 36rpx;
		touch-action: none; /* 禁用默认触摸动作 */
		color: #333;
		font-size: 24rpx;
		box-shadow: 6rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.14);
		&.top50{
			top: 72%;
		}
		.img{
			
		}
		.iconfont1{
			margin-right: 12rpx;
			font-size: 36rpx;
		}
		.iconfont2{
			margin-left: 20rpx;
			font-size: 30rpx;
			color: #ccc;
		}
		&.type1{
			top: auto !important;
			bottom: 120rpx;
			.block{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 214rpx;
				height: 76rpx;
				border-radius: 36rpx;
			}
		}
		&.type2,&.type3,&.type4{
			box-shadow: none;
			transition: right .3s;
		}
		&.type2{
			.img{
				width: 265rpx;
				height: 96rpx;
			}
		}
		&.type3{
			right: -48rpx;
			.name{
				position: absolute;
				bottom: 52rpx;
				left: 0;
				right: 0;
				z-index: 1;
				padding-right: 20rpx;
				text-align: center;
			}
			.img{
				width: 196rpx;
				height: 180rpx;
			}
		}
		&.type4{
			right: -15rpx;
			.name{
				position: absolute;
				bottom: 52rpx;
				left: 0;
				right: 0;
				z-index: 1;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
			}
			.iconfont{
				font-size: 40rpx;
			}
			.iconfont2{
				margin-left: 50rpx;
				color: #303133;
				font-size: 36rpx;
				font-weight: bold;
			}
			.img{
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
	.service-model{
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 1112;
		width: 538rpx;
		height: 660rpx;
		margin: -330rpx 0 0 -269rpx;
		padding-top: 56rpx;
		text-align: center;
		background-color: #fff;
		border-radius: 30rpx;
		.close{
			position: absolute;
			top: 22rpx;
			right: 22rpx;
			width: 34rpx;
			height: 34rpx;
			font-weight: bold;
			color: #727272;
		}
		.text1{
			margin-bottom: 36rpx;
			font-size: 32rpx;
			color: #2E2E2E;
		}
		.image{
			display: block;
			width: 395rpx;
			height: 395rpx;
			margin: 0 auto 24rpx;
		}
		.text2{
			font-size: 30rpx;
			color: #727272;
		}
	}
	.btn{
		padding: 0;
		background: none;
	}
	.minWidth{
		right: -150rpx;
	}
</style>